<template>
  <div class="edit-wrap">
    <div class="layui-form-item layui-form-text">
      <div class="layui-input-block">
        <div class="layui-unselect fly-edit" ref="icons">
          <span @click="choose(0)">
            <i class="iconfont icon-yxj-expression"></i>
          </span>
          <span @click="choose(1)">
            <i class="iconfont icon-tupian"></i>
          </span>
          <span @click="choose(2)">
            <i class="iconfont icon-lianjie"></i>
          </span>
          <span class="quote" @click="choose(3)">“</span>
          <span @click="choose(4)" ref="code">
            <i class="iconfont icon-emwdaima"></i>
          </span>
          <span @click="addHr()">hr</span>
          <span @click="choose(5)">
            <i class="iconfont icon-yulan1"></i>
          </span>
        </div>
        <textarea
          class="layui-textarea fly-editor"
          id="edit"
          ref="textEdit"
          placeholder="详细描述"
          name="content"
          v-model="content"
          @focus="focusEvent()"
          @blur="blurEvent()"
        ></textarea>
      </div>
      <div ref="modal">
        <face :isShow="current === 0" @closeEvent="closeModal()" @addEvent="addFace"></face>
        <img-upload :isShow="current === 1" @closeEvent="closeModal()" @addEvent="addPic"></img-upload>
        <link-add :isShow="current === 2" @closeEvent="closeModal()" @addEvent="addLink"></link-add>
        <quote :isShow="current === 3" @closeEvent="closeModal()" @addEvent="addQuote"></quote>
        <code-input
          :isShow="current === 4"
          @closeEvent="closeModal()"
          :width="codeWidth"
          :height="codeHeight"
          @addEvent="addCode"
        ></code-input>
        <preview :isShow="current === 5" @closeEvent="closeModal()" :content="content"></preview>
      </div>
    </div>
  </div>
</template>

<script>
import Face from './Face'
import ImgUpload from './ImgUpload'
import LinkAdd from './LinkAdd'
import Quote from './Quote'
import Code from './Code'
import Preview from './Preview'
export default {
  name: 'Editor',
  components: {
    Face, ImgUpload, LinkAdd, Quote, CodeInput: Code, Preview
  },
  props: ['initContent'],
  data () {
    return {
      current: '',
      codeWidth: 800,
      codeHeight: 360,
      content: '',
      pos: ''
    }
  },
  updated () {
    this.$emit('changeContent', this.content)
  },
  watch: {
    initContent (newval, oldval) {
      this.content = newval
    }
  },
  methods: {
    focusEvent () {
      this.getPos()
    },
    blurEvent () {
      this.getPos()
    },
    // 计算光标的位置
    getPos () {
      let cursorPos = 0
      const elem = document.getElementById('edit')
      if (document.selection) {
        // IE
        const selectRange = document.selection.createRange()
        selectRange.moveStart('character', -elem.value.length)
        cursorPos = selectRange.text.length
      } else if (elem.selectionStart || elem.selectionStart === '0') {
        cursorPos = elem.selectionStart
      }
      this.pos = cursorPos
    },
    insert (val) {
      if (typeof this.content === 'undefined') {
        return
      }
      const tmp = this.content.split('')
      tmp.splice(this.pos, 0, val)
      this.content = tmp.join('')
    },
    addFace (item) {
      const insertContent = `face${item}`
      this.insert(insertContent)
      this.pos += insertContent.length
    },
    addPic (val) {
      const insertContent = `img[${val}]`
      this.insert(insertContent)
      this.pos += insertContent.length
    },
    addLink (link) {
      const insertContent = `a(${link})[${link}]`
      this.insert(insertContent)
      this.pos += insertContent.length
    },
    // 添加代码
    addCode (code) {
      const insertContent = `[pre]\n${code}\n[/pre]`
      this.insert(insertContent)
      this.pos += insertContent.length
    },
    // 添加引用
    addQuote (quote) {
      const insertContent = `[quote]\n${quote}\n[/quote]`
      this.insert(insertContent)
      this.pos += insertContent.length
    },
    // 添加 hr
    addHr () {
      this.closeModal()
      const insertContent = '[hr]'
      this.insert(insertContent)
      this.pos += insertContent.length
    },
    closeModal () {
      this.current = ''
    },
    choose (k) {
      if (k === this.current) {
        this.closeModal()
      } else {
        this.current = k
      }
    },
    handleBodyClick (e) {
      e.stopPropagation()
      // 触发隐藏本组间的关闭事件
      // 是否点击到face意外的地方
      if (!(this.$refs.icons.contains(e.target) || this.$refs.modal.contains(e.target))) {
        this.closeModal()
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      document.querySelector('body').addEventListener('click', this.handleBodyClick)
    })
    this.codeWidth = this.$refs.textEdit.offsetWidth - 60
    this.codeHeight = this.$refs.textEdit.offsetHeight - 80
    window.addEventListener('resize', () => {
      this.codeWidth = this.$refs.textEdit.offsetWidth - 60
      this.codeHeight = this.$refs.textEdit.offsetHeight - 80
    })
  },
  beforeDestroy () {
    document.querySelector('body').removeEventListener('click', this.handleBodyClick)
  }
}
</script>

<style lang="scss">
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceOut {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.05);
  }
  100% {
    opacity: 0;
    transform: scale(0.7);
  }
}
.face-leave-active {
  animation: bounceOut 0.3s;
}
.face-enter-active.face-enter-to {
  animation: bounceIn 0.3s;
}
.fly-editor {
  height: 260px;
}
.quote {
  font-size: 22px;
  vertical-align: middle;
  position: relative;
  top: 4px;
}
.edit-wrap {
  position: relative;
}
.editor-content {
  position: absolute;
  top: 45px;
  left: 0;
  z-index: 9;
  background: #fff;
}
.layui-layer-prompt {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
</style>
